<template>
  <ul class="my-notify">
    <li v-for="item in noticesData" :key="item.id" class="mb-2 pb-2 border-b-dotted border-b-1 flex">
      <div class="flex flex-1">
        <div class="w-20 h-20 mr-3">
          <img style="width: 100%; height: 100%;" :src="item.notice.user.avatarUrl" alt="">
        </div>
        <div>
          <p>
            <span class="yu-textColor-hover mr-2" @click="jumpHomePage(item.notice.user.userId)">{{item.notice.user.nickname}}</span>
            <span class="yu-titleColor">{{ item.notice.generalNotice.actionDesc }}</span>
          </p>
          <p class="text-xs">{{ item.notice.generalNotice.content }}</p>
        </div>
      </div>
      <div class="w-50 flex items-center ">
        <span>{{ timestampToYMD(item.time, 's') }}</span>
        <span class="i-mdi-av-timer inline-block text-xl w-10"></span>
      </div>
    </li>
  </ul>
</template>

<script setup>
import {getMsgNotices} from "@/api/message/index";
import { timestampToYMD } from "@/utils/index";
import {ref} from "vue";
import {useRouter} from "vue-router";
const noticesData = ref()
const router = useRouter()
getMsgNotices().then(res => {
  const { code, notices } = res
  if (code === 200)
    noticesData.value = notices.map(item => {
    return {
      ...item,
      notice: JSON.parse(item.notice)
    }
  } )
  console.log(noticesData)
})

const jumpHomePage = (id) => {
  router.push({
    path: '/user/homepage',
    query: {
      id
    }
  })
}
</script>

<style scoped>

</style>
